<template>
    <van-nav-bar title="支付订单" left-text="" left-arrow @click-left="onClickLeft" style="background-color: #87cefa;">
    </van-nav-bar>
    <div style="background-color: #87cefa;height: 50px;width: 100%;z-index: -1;padding-top: 10px;">
    </div>
    <div
        style="background-color: #fff; width: 350px; height: 110px;margin: auto; border-radius: 10px 10px 0 0;margin-top: -45px;">
        <p class="p1">绿巢精品酒店(广州永泰地铁站)</p>
        <p class="p2">10月09日入住 10月10日离店 共 1 晚</p>
        <p class="p3">订单金额：￥413.0</p>
    </div>

    <div class="recom-pay">
        <p>推荐支付</p>
        <van-radio-group v-model="checked">
            <van-cell-group inset>
                <van-cell title="银行卡" clickable @click="checked = '1'" style="text-align: left;" icon="credit-pay">
                    <template #right-icon>
                        <van-radio name="1" />
                    </template>
                </van-cell>
            </van-cell-group>
        </van-radio-group>
    </div>
    <div class="other-pay">
        <van-radio-group v-model="checked">
            <van-cell-group inset>
                <van-cell title="微信支付" clickable @click="checked = '1'" style="text-align: left;" icon="wechat-pay">
                    <template #right-icon>
                        <van-radio name="1" />
                    </template>
                </van-cell>
                <van-cell title="QQ支付" clickable @click="checked = '1'" style="text-align: left;" icon="qq">
                    <template #right-icon>
                        <van-radio name="1" />
                    </template>
                </van-cell>
                <van-cell title="支付宝支付" clickable @click="checked = '1'" style="text-align: left;" icon="alipay">
                    <template #right-icon>
                        <van-radio name="1" />
                    </template>
                </van-cell>
                <van-cell title="朋友代付" clickable @click="checked = '1'" style="text-align: left;" icon="wechat-pay">
                    <template #right-icon>
                        <van-radio name="1" />
                    </template>
                </van-cell>
            </van-cell-group>
        </van-radio-group>
    </div>
    <p style="z-index: 99999;margin-top: 115px;">
        <van-button round type="success" size="large" color="#ee5c42">确认支付</van-button>
    </p>


</template>
<script setup>
const onClickLeft = () => history.back();
</script>
<style lang="scss">
* {
    margin: 0;
    padding: 0;
}

body {
    background-color: #eee;
}

.p1 {
    font-weight: 900;
    text-align: left;
    margin-left: 10px;
    margin-bottom: 10px;
    height: 35px;
    line-height: 35px;
}

.p2 {
    text-align: left;
    margin-left: 10px;
    margin-bottom: 10px;
}

.p3 {
    text-align: left;
    margin-left: 10px;
    height: 45px;
    line-height: 45px;
    border-top: 1px dashed #ddd;
}

.recom-pay {
    margin-top: 150px;
    background-color: #fff;
    width: 350px;
    margin: auto;
    margin-top: 10px;
    border-radius: 10px;

    p {
        height: 40px;
        font-weight: 900;
        text-align: left;
        line-height: 40px;
        margin-left: 10px;
    }
}

.other-pay {
    margin-top: 150px;
    background-color: #fff;
    width: 350px;
    margin: auto;
    margin-top: 10px;
    border-radius: 10px;
}
</style>